<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-21 19:08:03
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-23 01:41:12
-->
<template>
    <div>
        <el-form inline="true" ref="editFormRef" :model="editForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>客户信息</div>
                    </div>
                </template>
                <div class="mescustomer">
                    <div class="mescustomerleft">
                        <el-form-item label="客户名称" prop="customername">
                            <el-input v-model="editForm.customername" placeholder="请输入客户名称" clearable />
                        </el-form-item>
                        <el-form-item label="联系人" prop="customercontact">
                            <el-input v-model="editForm.customercontact" placeholder="请输入联系人" clearable />
                        </el-form-item>
                        <el-form-item label=" 联系电话" prop="customerphone">
                            <el-input v-model="editForm.customerphone" placeholder="请输入联系电话" clearable />
                        </el-form-item>
                        <el-form-item label="联系邮箱" prop="customeremail">
                            <el-input v-model="editForm.customeremail" placeholder="请输入联系邮箱" clearable />
                        </el-form-item>
                        <el-form-item label="公司职位" prop="customerposition">
                            <el-input v-model="editForm.customerposition" placeholder="请输入公司职位" clearable />
                        </el-form-item>

                    </div>
                    <div class="mescustomerright">
                        <el-form-item label="性别" prop="customersex">
                            <el-select v-model="editForm.customersex" placeholder="请选择性别" clearable>
                                <el-option label="先生" value="boy" />
                                <el-option label="女士" value="girl" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生日" prop="customerbirthday">
                            <div style="width:180px">
                                <el-date-picker v-model="editForm.customerbirthday" type="date" placeholder="请选择生日"
                                    clearable style="width:100%" />
                            </div>
                        </el-form-item>
                        <el-form-item label="客户简介" prop="customerprofile">
                            <el-input v-model="editForm.customerprofile" placeholder="请输入客户简介" clearable />
                        </el-form-item>
                        <el-form-item label="所属地区" prop="customerarea">
                            <div style="width:180px">
                                <el-cascader v-model="editForm.customerarea" :options="provinceAndCityDataRef"
                                    style="width:100%" />
                            </div>
                        </el-form-item>
                        <el-form-item label="信用代码" prop="creditcode">
                            <el-input v-model="editForm.creditcode" placeholder="请输入信用代码" clearable />
                        </el-form-item>


                    </div>
                </div>
            </el-card>

            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>跟进信息</div>
                    </div>
                </template>
                <div class="mescustomer">
                    <div class="mescustomerleft">
                        <el-form-item label="客户来源" prop="customersource">
                            <el-select v-model="editForm.customersource" placeholder="请选择客户来源" clearable>
                                <el-option label="电话营销" value="TelephoneMarketing " />
                                <el-option label="微信营销" value="WeChatMarketing " />
                                <el-option label="SEM" value="SEM" />
                                <el-option label="信息流" value="InformationFlow " />
                                <el-option label="客户介绍" value="CustomerIntroduction " />
                                <el-option label="独立开发" value="IndependentDevelopment" />
                                <el-option label="社群" value="Community " />
                                <el-option label="其他" value="Others" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户等级" prop="customerlevel">
                            <el-select v-model="editForm.customerlevel" placeholder="请选择客户等级" clearable>
                                <el-option label="SSS" value="SSS" />
                                <el-option label="SS" value="SS" />
                                <el-option label="S" value="S" />
                                <el-option label="A" value="A" />
                                <el-option label="B" value="B" />
                                <el-option label="C" value="C" />
                                <el-option label="D" value="D" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="mescustomerright">
                        <el-form-item label="跟进状态" prop="followupstatus">
                            <el-select v-model="editForm.followupstatus" placeholder="请选择跟进状态" clearable>
                                <el-option label="初次沟通" value="FirstCommunication" />
                                <el-option label="方案报价" value="SolutionQuotation" />
                                <el-option label="邀约进行" value="InvitationToProceed" />
                                <el-option label="商务谈判" value="BusinessNegotiation" />
                                <el-option label="拟定合同" value="DrawUpAContract" />
                                <el-option label="签订合同" value="signingTheContract" />
                                <el-option label="结束跟进" value="EndFollowUp" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="意向产品" prop="intentionalproduct">
                            <el-select v-model="editForm.intentionalproduct" placeholder="请选择意向产品" clearable>
                                <el-option label="手机" value="phone" />
                                <el-option label="笔记本电脑" value="laptop" />
                                <el-option label="耳机" value="headphones" />
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-card>
            <el-card class="buttonItem">
                <el-button type="primary" :loading="loading" @click="saveForm">保存</el-button>
                <el-button type="primary" @click="cancelSave">取消</el-button>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { useCustomerIdInfo } from "../minehooks"
import { userCustomerFollowIDUpApi, userCustomerFollowUpApi, userCustomerEditApi } from "@/services/customer";
import { successMessage } from "@/utils/Tools/successMessage";
import { errorMessage } from "@/utils/Tools/errorMessage";
import { provinceAndCityData, regionData } from 'element-china-area-data';
import type { ICustomerData } from "@/types/customer";
const provinceAndCityDataRef = ref(provinceAndCityData);
const regionDataRef = ref(regionData);
const editFormRef = ref<FormInstance>()
const editForm = ref({
    customername: "",
    customercontact: "",
    customerphone: "",
    customeremail: "",
    customerposition: "",
    customersource: "",
    customerlevel: "",
    customersex: "",
    customerbirthday: "",
    customerprofile: "",
    customerarea: "",
    creditcode: "",
    followupstatus: "",
    intentionalproduct: "",
    followupmethod: "",
    followuptime: "",
    followuptext: ""
})

interface IProps {
    followId: number
    setDialogVisible: (visible: boolean) => void
}

const props = defineProps<IProps>()
//回显
onMounted(async () => {
    let ret = await userCustomerFollowIDUpApi(props.followId)
    Object.assign(editForm.value, ret.data.customer)
    editForm.value.customerarea = ret.data.customer.customerarea
});
// 保存
const loading = ref(false)
const saveForm = () => {
    if (!editFormRef.value) return
    loading.value = true
    editFormRef.value.validate(async valid => {
        if (valid) {
            //这儿需要网络请求
            let ret = await userCustomerEditApi(editForm)
            console.log(ret)
            if (ret.code === 200) {
                successMessage('编辑用户成功', () => {
                    loading.value = false
                    props.setDialogVisible(false)
                }, 1000)
            } else {
                errorMessage('编辑用户异常，请重新提交', () => {
                    loading.value = false
                }, 3000)
            }
        } else {
            errorMessage('表单验证失败', () => {
                loading.value = false
            }, 3000)
        }
    })
}
// 取消
const cancelSave = () => {
    if (!editFormRef.value) return
    editFormRef.value.resetFields()
}
const rules = reactive<FormRules<ICustomerData.IFollowUp>>({
    customername: [{ required: true, whitespace: true, message: '客户名称不能为空', trigger: 'blur' }],
    customercontact: [
        { required: true, whitespace: true, message: '客户联系人不能为空', trigger: 'blur' },
    ],
    customerphone: [
        { required: true, whitespace: true, message: '联系电话不能为空', trigger: 'blur' },
    ],
    customersource: [{ required: true, whitespace: true, message: '客户来源不能为空', trigger: 'blur' },],
    followupstatus: [{ required: true, whitespace: true, message: '跟进状态不能为空', trigger: 'blur' },],
    customerlevel: [{ required: true, whitespace: true, message: '客户等级不能为空', trigger: 'blur' },],
    followuptime: [{ required: true, message: '跟进时间不能为空', trigger: 'change', },],
    intentionalproduct: [{ required: true, whitespace: true, message: '意向产品不能为空', trigger: 'blur' },],
    founder: [{ required: true, whitespace: true, message: '联系人不能为空', trigger: 'blur' },],
    followupmethod: [{ required: true, whitespace: true, message: '跟进方式不能为空', trigger: 'blur' }],
    followuptext: [
        { required: true, whitespace: true, message: '跟进内容不能为空', trigger: 'blur' },
    ],
})
</script>

<style lang="scss" scoped>
.mescustomer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;

    .mescustomerleft {

        width: 50%;
        height: 100%;
        // background-color: red;
    }

    .mescustomerright {
        width: 50%;
        height: 100%;
        // background-color: blue;
    }

}

.boxHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.el-form-item {

    .el-input,
    .el-select,
    .el-date-picker,
    .el-date-editor.el-input,
    .el-form-item__content {
        width: 180px !important;
        margin-right: 20px; // Add margin between input fields if needed
    }
}

.textArea {
    width: 96%;
}

.el-date-picker {
    width: 180px !important;
}

.buttonItem {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        margin: 0 10px; // Adjust margin as needed
    }
}
</style>